import { useState } from "react";

import AddTodo from "./pages/AddTodo";
import TodoList from "./pages/TodoList";
import TodoFooter from "./pages/TodoFooter";

import "./App.css";

/*
  组件间通信：
    1. 父子组件通信 -> props
    2. 祖孙组件通信 -> context
*/

import TodoContext from "./context/TodoContext";

export default function App() {
  const [todoList, setTodoList] = useState([
    {
      id: 1,
      name: "吃饭",
      isCompleted: false,
    },
    {
      id: 2,
      name: "睡觉",
      isCompleted: true,
    },
  ]);

  // 单选
  const updateTodo = (id) => {
    setTodoList(
      todoList.map((todo) => {
        if (todo.id === id) {
          return {
            ...todo,
            isCompleted: !todo.isCompleted,
          };
        }
        return todo;
      })
    );
  };

  // 删除
  const delTodo = (id) => {
    setTodoList(todoList.filter((todo) => todo.id !== id));
  };

  return (
    <TodoContext.Provider value={{ updateTodo, delTodo }}>
      <div className="todo-container">
        <div className="todo-wrap">
          <AddTodo />
          <TodoList todoList={todoList} />
          <TodoFooter />
        </div>
      </div>
    </TodoContext.Provider>
  );
}
